<template>
    <div class="tiaoz">
        <!-- <Navback title="商品详情" right-text="客服"></Navback> -->
      <!-- <h3>加号跳转</h3> -->
      <div class="title"> 
        <div class="times"> <van-icon name="cross" size="20px" @click= back() /> </div>
        <div class="right">
           <div class="day">
             <p class="fir">星期五</p> 
             <p class="two"> 12/2022 </p> 
           </div>  
           <div class="ment">
              02
           </div>
        </div>
         
      </div>
      <div class="pos"> 
      <div class="connect"> 
      <p class="thetop"> 美味不设限 和太太乐一起搞定观球美食 <van-icon name="arrow" size="16px" /></p>
      <p class="thebot">活动专区参与太太乐#嗨翻世界杯,美味不设限活动,传观球大赛赢大奖 </p>
      <div class="bianbu"> 
      <div class="fabu">
        <h3>发布菜谱  </h3> 
        <div class="blank">
         <div class="one"> </div>
         <div class="two"></div>
         <div class="three"></div>
         <div class="four"></div>
         <div class="fif"></div>
      </div>

      </div>
      
      <div class="fbunote">
       <h3> 发布笔记 </h3> 
       <div class="bnote">
         <div class="one"> <van-icon name="video-o" size="30px" /> </div>
         <div class="two"></div>
         <div class="three"></div>
         <div class="four"></div>
         <div class="fif"></div>
      </div>
      </div>

      
     </div>
     <div class="draft">
         草稿箱
      </div>
    </div>

     

    </div>
    </div>
</template>

<script>

    import Navback from '../components/Navback.vue'; 
    export default {
       name:"Tiaoz",
          components:{
            Navback
          },
          methods:{
            //默认返回上一级
            back(){
                this.$router.back();
            },
        }
    }
</script>

<style lang="less" scoped>
    .title{
        padding: 10px;
        display: flex;
        align-items: center;
        .right{
            margin-left: auto;
            align-items: center;
            display: flex; 
           .day{
            font-size: medium;
            font-weight: 800;
            .fir{
                font-weight: 800;
                font-size: large;
            }
            p{
                margin: 0;

            }
           }
           .ment{
            margin-left: 5px;
            font-size: 30px;
            font-weight: 900;
           }
        }
        
    }
    .pos{
        position: relative;
        height: 500px;
     
          .connect{
             
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          
            .thetop{
              width: 300px;
              font-size: medium;
              font-weight: 800;
              color:#7b7b7b ;
            }
            .thebot{
                margin-bottom: 80px;
               
                color: #989898;
               font-size: small;
               font-weight: 800;
            }
            .bianbu{
                display: flex;
                .fabu{
                    text-align: center;
                    border-radius: 8px;
                    width:calc( 50% - 2.5px ) ;
                    margin-right:  5px;
                    height: 210px;
                    padding:8px;
                    color: #598b52;
                    background-color:#b6ccb3 ;
                    .blank{
                     width: 100%;
                     margin-bottom: 15px;
                    

                     .one{
                        width: 100%;
                        height: 15px;
                        background-color:#dae6d9 ;
                        margin-bottom: 8px;
                     }
                     .two{
                    
                        height: 15px;
                        background-color: #dae6d9;
                        width: 50%;
                        margin-bottom: 8px;
                     }
                     .three{
                        width: 100%;
                        height: 60px;
                        background-color:#dae6d9 ;
                        margin-bottom: 8px;
                     }
                     .four{
                    
                        height: 15px;
                        background-color:#dae6d9 ;
                        width: 50%;
                        margin-bottom: 8px;
                     }
                     .fif{
                        width: 100%;
                        background-color:#dae6d9 ;
                        margin-bottom: 8px;
                        height: 15px;
                     }
                   }
                 }
               
                .fbunote{
                    color: #cca53d;
                    text-align: center;
                    padding:8px;
                    border-radius: 8px;
                    width:calc( 50% - 2.5px ) ;
                    margin-left:  5px;
                    width: 50%;
                    height: 210px;
                    background-color:#fee192;
                    .bnote{
                        .one{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        text-align: center;
                        line-height: 60px;
                        width: 100%;
                        height: 60px;
                        background-color:#fff5db ;
                        margin-bottom: 8px;
                     }
                     .two{
                    
                        height: 15px;
                        background-color:#fff5db;
                        width: 100%;
                        margin-bottom: 8px;
                     }
                     .three{
                        width: 50%;
                        height: 15px;
                        background-color:#fff5db;
                        margin-bottom: 8px;
                     }
                     .four{
                    
                        height: 15px;
                        background-color:#fff5db;
                        width: 80%;
                        margin-bottom: 8px;
                     }
                     .fif{
                        width: 70%;
                        background-color:#fff5db;
                        margin-bottom: 8px;
                        height: 15px;
                     }
                    }
                    
                }
            }
            .draft{
                        text-align: center;
                        padding: 60px;
                        font-weight: 700;
                        font-size: small;
                        color: #848484;
                    }
                }
    }
  
</style>